import { getReplyList } from '@/store/actions/article'
import { Comment, CommentRes } from '@/types/data'
import { RootState } from '@/types/store'
import { NavBar } from 'antd-mobile'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import CommentFooter from '../CommentFooter'
import CommentItem from '../CommentItem'
import NoComment from '../NoComment'
import styles from './index.module.scss'

type Props = {
  onClose?: () => void
  origin: Comment
}
export default function CommentReply({ onClose, origin }: Props) {
  const dispatch = useDispatch()

  const reply = useSelector<RootState, CommentRes>(
    (state) => state.article.reply
  )

  useEffect(() => {
    dispatch(getReplyList(origin.com_id, ''))
  }, [origin, dispatch])

  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        {/* 顶部导航栏 */}
        <NavBar className="transparent-navbar" onBack={onClose}>
          <div>{origin.reply_count}条回复</div>
        </NavBar>

        {/* 原评论信息 */}
        <div className="origin-comment">
          <CommentItem comment={origin} type="reply" />
        </div>

        {/* 回复评论的列表 */}
        <div className="reply-list">
          <div className="reply-header">全部回复</div>

          {reply?.results?.length === 0 ? (
            <NoComment />
          ) : (
            reply?.results?.map((item) => (
              <CommentItem key={item.com_id} comment={item} type="reply" />
            ))
          )}

          <NoComment />
        </div>

        {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
        <CommentFooter />
      </div>
    </div>
  )
}
